<template>
    <div class="home">
        <h1>SONSONSON</h1>
        <button @click="isShow=true">弹窗</button>
        <Teleport to="body">
            <!-- Teleport用于将包含的代码片段传送到指定位置 -->
            <div v-if="isShow" class="mask">
                 <div  class="diglog">
                    <h1>SONSONSON</h1>
                    <h1>SONSONSON</h1>
                    <h1>SONSONSON</h1>
                    <h1>SONSONSON</h1>
                    <button @click="isShow=false">关闭弹窗</button>
                </div>
            </div>
        </Teleport>
    </div>
</template>

<script>
import { ref } from 'vue'
export default {
    setup() {
        let isShow=ref(false)
        return {isShow}
    },
}
</script>
<style scoped>
.home{
  background-color: #f1f3f5;
  padding: 10px;
}
.mask{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: rgb(0, 0, 0,0.5);
}
.diglog{
    width: 400px;
    height: 400px;
    background-color: red;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}
</style>